fix: Show loading indicators in the bookmark preview page

1 files changed, 2 insertions, 52 deletions

diff --git a/packages/web/app/dashboard/preview/[bookmarkId]/page.tsx b/packages/web/app/dashboard/preview/[bookmarkId]/page.tsx
index 030ad2df..47aeb891 100644
--- a/packages/web/app/dashboard/preview/[bookmarkId]/page.tsx
+++ b/packages/web/app/dashboard/preview/[bookmarkId]/page.tsx
@@ -1,8 +1,5 @@
-import { BackButton } from "@/components/ui/back-button";
 import { api } from "@/server/api/client";
-import { ArrowLeftCircle, CalendarDays, ExternalLink } from "lucide-react";
-import Link from "next/link";
-import Markdown from "react-markdown";
+import BookmarkPreview from "./components/BookmarkPreview";
 
 export default async function BookmarkPreviewPage({
   params,
@@ -13,52 +10,5 @@ export default async function BookmarkPreviewPage({
     bookmarkId: params.bookmarkId,
   });
 
-  const linkHeader = bookmark.content.type == "link" && (
-    <div className="flex flex-col space-y-2">
-      <p className="text-center text-3xl">{bookmark.content.title}</p>
-      <Link href={bookmark.content.url} className="mx-auto flex gap-2">
-        <span className="my-auto">View Original</span>
-        <ExternalLink />
-      </Link>
-    </div>
-  );
-
-  let content;
-  switch (bookmark.content.type) {
-    case "link": {
-      content = (
-        <div
-          dangerouslySetInnerHTML={{
-            __html: bookmark.content.htmlContent || "",
-          }}
-          className="prose"
-        />
-      );
-      break;
-    }
-    case "text": {
-      content = <Markdown className="prose">{bookmark.content.text}</Markdown>;
-      break;
-    }
-  }
-
-  return (
-    <div className="bg-background m-4 min-h-screen space-y-4 rounded-md border p-4">
-      <div className="flex justify-between">
-        <BackButton className="ghost" variant="ghost">
-          <ArrowLeftCircle />
-        </BackButton>
-        <div className="my-auto">
-          <span className="my-auto flex gap-2">
-            <CalendarDays /> {bookmark.createdAt.toLocaleString()}
-          </span>
-        </div>
-      </div>
-      <hr />
-      {linkHeader}
-      <div className="mx-auto flex h-full border-x p-2 px-4 lg:w-2/3">
-        {content}
-      </div>
-    </div>
-  );
+  return <BookmarkPreview initialData={bookmark} />;
 }